<div class="header-container" *ngIf="!showMobileHeader">
  <div class="header-top-menu">
    <ng-container [ngTemplateOutlet]="logoTpl"></ng-container>
    <ng-container [ngTemplateOutlet]="menuTpl"></ng-container>
  </div>
  <ng-container [ngTemplateOutlet]="headerBottomTpl"></ng-container>
</div>

<div class="mobile-header-container" *ngIf="showMobileHeader">
  <div class="mobile-header-left">
    <div class="mobile-hamburger" (click)="toggleHamburger($event)">
      <ng-container [ngTemplateOutlet]="hamburgerTpl"></ng-container>
    </div>
    <ng-container [ngTemplateOutlet]="logoTpl"></ng-container>
  </div>
  <ng-container [ngTemplateOutlet]="expandTpl" *ngIf="!isHomePage"></ng-container>
  <div class="mobile-sider" [class.mobile-sider-show]="showHamburger">
    <ng-container [ngTemplateOutlet]="menuTpl"></ng-container>
    <div class="mobile-bottom-menu-hidden" [class.mobile-bottom-menu-show]="showHamburger">
      <ng-container [ngTemplateOutlet]="headerBottomTpl"></ng-container>
    </div>
  </div>
</div>

<ng-template #menuTpl>
  <ng-content select="d-header-menu"></ng-content>
</ng-template>

<ng-template #logoTpl>
  <ng-content select="d-header-logo"></ng-content>
</ng-template>

<ng-template #hamburgerTpl>
  <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>hamburger</title>
    <g id="hamburger" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M5,17 C6.1045695,17 7,17.8954305 7,19 C7,20.1045695 6.1045695,21 5,21 C3.8954305,21 3,20.1045695 3,19 C3,17.8954305 3.8954305,17 5,17 Z M12,17 C13.1045695,17 14,17.8954305 14,19 C14,20.1045695 13.1045695,21 12,21 C10.8954305,21 10,20.1045695 10,19 C10,17.8954305 10.8954305,17 12,17 Z M19,17 C20.1045695,17 21,17.8954305 21,19 C21,20.1045695 20.1045695,21 19,21 C17.8954305,21 17,20.1045695 17,19 C17,17.8954305 17.8954305,17 19,17 Z M5,10 C6.1045695,10 7,10.8954305 7,12 C7,13.1045695 6.1045695,14 5,14 C3.8954305,14 3,13.1045695 3,12 C3,10.8954305 3.8954305,10 5,10 Z M12,10 C13.1045695,10 14,10.8954305 14,12 C14,13.1045695 13.1045695,14 12,14 C10.8954305,14 10,13.1045695 10,12 C10,10.8954305 10.8954305,10 12,10 Z M19,10 C20.1045695,10 21,10.8954305 21,12 C21,13.1045695 20.1045695,14 19,14 C17.8954305,14 17,13.1045695 17,12 C17,10.8954305 17.8954305,10 19,10 Z M5,3 C6.1045695,3 7,3.8954305 7,5 C7,6.1045695 6.1045695,7 5,7 C3.8954305,7 3,6.1045695 3,5 C3,3.8954305 3.8954305,3 5,3 Z M12,3 C13.1045695,3 14,3.8954305 14,5 C14,6.1045695 13.1045695,7 12,7 C10.8954305,7 10,6.1045695 10,5 C10,3.8954305 10.8954305,3 12,3 Z M19,3 C20.1045695,3 21,3.8954305 21,5 C21,6.1045695 20.1045695,7 19,7 C17.8954305,7 17,6.1045695 17,5 C17,3.8954305 17.8954305,3 19,3 Z" id="形状结合" fill="#71757F"></path>
    </g>
</svg>
</ng-template>

<ng-template #headerBottomTpl>
  <div class="header-bottom-menu">
    <div class="menu-item">
      <ng-content select="d-header-theme-switch"></ng-content>
    </div>
    <div class="menu-item">
      <ng-content select="d-header-language-switch"></ng-content>
    </div>
    <div class="menu-item">
      <a [href]="gitcodeLink" rel="noopener noreferrer" target="blank">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M15.4791 4.97677C15.6201 4.89789 15.7691 4.8145 15.93 4.72314C15.9494 4.82848 15.9683 4.92046 15.9854 5.00383C16.0157 5.15091 16.0406 5.2719 16.0525 5.39144C16.1479 6.4296 16.6697 7.1933 17.4093 7.36527C18.4908 7.61639 19.5106 7.20133 20.06 6.28555C20.72 5.18673 20.4334 3.84099 19.3097 3.03098C16.1851 0.777435 12.7523 0.155888 9.05448 1.24127C1.08137 3.59371 -1.64675 13.3884 4.01196 19.3949C6.43292 21.9642 9.50695 23.0727 12.9963 22.9889C17.4663 22.8839 20.6857 20.6563 22.7408 16.7954C24.1978 14.0561 22.6139 11.0619 19.5805 10.4396C17.8481 10.0908 16.0765 9.97757 14.3137 10.103C13.7272 10.1594 13.1579 10.3325 12.6394 10.6124C12.0592 10.9135 11.8915 11.5383 11.9565 12.1575C12.0171 12.7217 12.4498 13.0601 12.965 13.1453C14.0024 13.3077 15.0522 13.402 16.1 13.4881C16.4032 13.5136 16.7093 13.5166 17.0149 13.5197C17.4534 13.5241 17.8912 13.5285 18.3187 13.5991C19.5385 13.8007 19.9574 14.7905 19.33 15.8495C19.1763 16.1041 18.9971 16.3424 18.7951 16.5607C17.9745 17.4632 16.9014 18.0981 15.7152 18.3827C13.55 18.9127 11.3827 18.9425 9.22755 18.2617C6.77347 17.4875 5.31042 15.6849 5.25902 13.2584C5.2398 11.7619 5.61972 10.2874 6.35969 8.9865C6.69401 8.38013 6.87751 7.75562 6.82593 7.06851C6.80422 6.77557 6.79219 6.48231 6.77927 6.16716C6.77239 5.99944 6.76526 5.82551 6.75628 5.64214C7.00484 5.69431 7.25032 5.76016 7.49161 5.83943C8.43027 6.21622 9.35415 6.38812 10.3702 6.11155C10.9482 5.97335 11.5455 5.93511 12.1363 5.9985C13.0877 6.07606 14.0387 5.84361 14.847 5.33586C15.0488 5.2176 15.2539 5.10279 15.4791 4.97677Z" fill="#DA203E"/>
          </svg>        
      </a>
    </div>
    <div class="menu-item">
      <a [href]="githubLink" rel="noopener noreferrer" target="blank">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <path
            fill="#71757f"
            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 01-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 010 8c0-4.42 3.58-8 8-8z"
          />
        </svg>
      </a>
    </div>
    <ng-container [ngTemplateOutlet]="expandTpl" *ngIf="!showMobileHeader"></ng-container>
  </div>
</ng-template>

<ng-template #expandTpl>
  <div class="expand-sidebar" (click)="clickSlideMenu(true)" *ngIf="showExpandButton">
    <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="收起" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path d="M9.4141965,1.48235598 C9.59170754,1.65979691 9.60784491,1.937463 9.4626086,2.13312669 L9.4141965,2.1891835 L3.71630048,7.88482928 C3.662061,7.93904734 3.65302108,8.02133773 3.68918074,8.08491324 L3.71630048,8.12043846 L9.4141965,13.8160842 C9.60945864,14.0112693 9.60945864,14.3277267 9.4141965,14.5229118 C9.23668545,14.7003527 8.95890967,14.7164837 8.76316867,14.5713047 L8.70708972,14.5229118 L3.0091937,8.82726598 C2.58038271,8.39862434 2.55515854,7.71932504 2.93352117,7.26119426 L3.0091937,7.17800175 L8.70708972,1.48235598 C8.90235186,1.28717094 9.21893435,1.28717094 9.4141965,1.48235598 Z M13.1867116,1.48235598 C13.3642226,1.65979691 13.38036,1.937463 13.2351237,2.13312669 L13.1867116,2.1891835 L7.48881554,7.88482928 C7.43457605,7.93904734 7.42553614,8.02133773 7.46169579,8.08491324 L7.48881554,8.12043846 L13.1867116,13.8160842 C13.3819737,14.0112693 13.3819737,14.3277267 13.1867116,14.5229118 C13.0092005,14.7003527 12.7314247,14.7164837 12.5356837,14.5713047 L12.4796048,14.5229118 L6.78170876,8.82726598 C6.35289777,8.39862434 6.32767359,7.71932504 6.70603623,7.26119426 L6.78170876,7.17800175 L12.4796048,1.48235598 C12.6748669,1.28717094 12.9914494,1.28717094 13.1867116,1.48235598 Z" id="形状结合" fill="#71757F" transform="translate(8.000322, 8.002634) rotate(-180.000000) translate(-8.000322, -8.002634) "></path>
      </g>
    </svg>
  </div>
  <div class="expand-sidebar" (click)="clickSlideMenu(false)" *ngIf="showCollapseButton">
    <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="展开" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path d="M9.41355339,1.47708824 C9.59106443,1.65452918 9.6072018,1.93219527 9.46196549,2.12785896 L9.41355339,2.18391577 L3.71565738,7.87956154 C3.66141789,7.93377961 3.65237798,8.01607 3.68853763,8.0796455 L3.71565738,8.11517072 L9.41355339,13.8108165 C9.60881554,14.0060015 9.60881554,14.322459 9.41355339,14.517644 C9.23604235,14.695085 8.95826656,14.711216 8.76252556,14.566037 L8.70644661,14.517644 L3.0085506,8.82199825 C2.57973961,8.39335661 2.55451543,7.7140573 2.93287807,7.25592653 L3.0085506,7.17273402 L8.70644661,1.47708824 C8.90170876,1.28190321 9.21829124,1.28190321 9.41355339,1.47708824 Z M13.1860684,1.47708824 C13.3635795,1.65452918 13.3797169,1.93219527 13.2344805,2.12785896 L13.1860684,2.18391577 L7.48817243,7.87956154 C7.43393295,7.93377961 7.42489303,8.01607 7.46105269,8.0796455 L7.48817243,8.11517072 L13.1860684,13.8108165 C13.3813306,14.0060015 13.3813306,14.322459 13.1860684,14.517644 C13.0085574,14.695085 12.7307816,14.711216 12.5350406,14.566037 L12.4789617,14.517644 L6.78106565,8.82199825 C6.35225466,8.39335661 6.32703049,7.7140573 6.70539312,7.25592653 L6.78106565,7.17273402 L12.4789617,1.47708824 C12.6742238,1.28190321 12.9908063,1.28190321 13.1860684,1.47708824 Z" id="形状结合" fill="#71757F" transform="translate(7.999678, 7.997366) scale(-1, -1) rotate(-180.000000) translate(-7.999678, -7.997366) "></path>
      </g>
    </svg>
  </div>
</ng-template>